<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #000000;
			}
			.wrap{
				height: 200px;
				margin-top: 150px;
				/* 3、给爷爷加景深 */
				perspective:1000px ;
			}
			
			.wrap .cube{
				/* 2、父级相对定位 */
				position: relative;
				width: 12.5rem;
				height: 12.5rem;
				margin: 0 auto;
				/* 4、爸爸加3d,因为最后旋转的是爸爸 */
				transform-style: preserve-3d;
				animation: box 10s linear infinite;
				/* 5、在chrome开发者工具调试旋转父级查看效果 */
				transform: rotateX(0deg) rotateY(0deg);
				
			}
			
			@keyframes box{
				0%{transform: rotateX(0) rotateY(0) rotateZ(0deg);}
				100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
			}
			
			/* big box */
			.wrap .cube div{
				/*/2、自己为绝对定位相对于父级,把6个面盒子全部放进来 */
				position: absolute;
				top: 0;
				left: 0;
				/*/1、相对于父级100% */
				width: 100%;
				height: 100%;
				border: 0px solid black;
				font-size: 1.25rem;
				color: white;
				text-align: center;
				line-height: 200px;
				transition: transform .3s ease-in;
			}
			
			/* 5、调试出的参数 */
			.wrap .cube .front{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: translateZ(100px);
			}
			
			.wrap .cube .back{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: translateZ(-100px) rotateY(180deg);
			}
			
			.wrap .cube .right{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateY(90deg) translateZ(100px);
				
			}
			
			.wrap .cube .left{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateY(-90deg) translateZ(100px);
				
			}
			
			.wrap .cube .top{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateX(90deg) translateZ(100px);
				
			}
			
			.wrap .cube .bottom{
				background-image: url(img/7.jpg);
				background-size: auto 100%; 
				transform: rotateX(-90deg) translateZ(100px);
				
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="front"></div>
				<div class="back"></div>
				<div class="right"></div>
				<div class="left"></div>
				<div class="top"></div>
				<div class="bottom"></div>
			</div>
	</body>
</html>